<template>
  <a-modal class="common-modal" :title="$t('hangManage.imgVideo')" :footer="null" :width="isEdit ? 602 : 800" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <div v-if="isEdit">
      <div class="p-20">
        <a-upload v-model:file-list="fileList" :headers="uploadHeader" :action="uploadUrl" @change="handleUploadImg" list-type="picture-card" :beforeUpload="beforeUpload" multiple @preview="(file) => handlePreviewToggle(true, file , record)">
          <div>
            <plus-outlined />
            <div class="mt-10">{{ $t('other.upload') }}</div>
          </div>
        </a-upload>
        <div class="upload-tip">{{ $t('other.ruleUploadMsg') }}</div>

      </div>
    </div>
    <div v-else class="p-20 upload-view-carousel" id="carouselOut">
      <a-carousel arrows dots-class="slick-dots slick-thumb" :before-change="goto" v-if="visible">
        <template #customPaging="props">
          <a>
            <video v-if="isMp4(fileList[props.i].url)" preload="auto" style="width: 100%;height: 100%;object-fit: fill">
              <source :src="fileList[props.i].url" type="video/mp4">
              {{ $t('other.notVideo') }}
            </video>
            <img v-else :src="fileList[props.i].url" />
          </a>
        </template>
        <div v-for="(item, index) in fileList" :key="index">
          <video preload="auto" controls v-if="isMp4(item.url) && visible" style="width: 100%;height: 100%;object-fit: fill">
            <source :src="item.url" type="video/mp4">
            {{ $t('other.notVideo') }}
          </video>
          <img :src="item.url" v-if="!isMp4(item.url)&&visible" style="width: 100%;height: 100%;" />
        </div>
      </a-carousel>
    </div>
    <div class="common-modal-footer">
      <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
      <a-button @click="handleOk" type="primary" class="confirm" v-if="isEdit">{{$t('common.ok')}}</a-button>
    </div>
    <a-modal :visible="previewVisible" :title="$t('other.viewPic')" :width="655 " :footer="null" @cancel="() => handlePreviewToggle(false)">
      <video preload="auto" controls v-if="isMp4(previewImage) " style="width: 600px;height: 100%;object-fit: fill">
        <source :src="previewImage" type="video/mp4">
        {{ $t('other.notVideo') }}
      </video>
      <img alt="example" v-else style="width: 600px;height: 100%;" :src="previewImage" />
    </a-modal>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { cloneDeep, pick } from 'lodash'
// import axios from '@/utils/request'
import { uploadUrl } from '@/api/commonApi'
import { message, Upload } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue';
import { getToken, handleUploadImg } from "@/utils";
const emits = defineEmits(['ok'])
let visible = ref(false)
let fileList = ref([])
let operateIndex = ref(-1)
let isEdit = ref(false)
let uploadHeader = ref({
  Authorization: getToken()
})
let previewImage = ref('')
let previewVisible = ref(false)

const open = async (imgList, index, editable) => {
  operateIndex.value = index
  isEdit.value = editable
  initFileList(cloneDeep(imgList))
  visible.value = true
}
const initFileList = async (list) => {
  fileList.value = list
}
const isMp4 = (filename) => {
  const suffixName = filename.split('.')
  const last = suffixName[suffixName.length - 1]
  return last == 'mp4'
}
const goto = () => {
  const carouselOut = document.querySelectorAll('#carouselOut .slick-list')[0]
  carouselOut.scrollTop = 0
}
const beforeUpload = file => {
  const suffixName = file.name.split('.')
  const last = suffixName[suffixName.length - 1]
  const acceptAry = ['jpg', 'jpeg', 'gif', 'png', 'mp4']
  let isAccept = acceptAry.includes(last)
  if (!isAccept) message.error('仅支持上传后缀名为.jpg、.jpeg、.gif、.png、.mp4的文件!')

  const isLt10M = file.size / 1024 / 1024 < 20
  if (!isLt10M) message.error('文件最大不超过20MB!')

  const isEmpty = file.size > 0
  if (!isEmpty) message.error('不能上传空文件!')
  return (isAccept && isLt10M && isEmpty) || Upload.LIST_IGNORE
};
const handlePreviewToggle = (value, file) => {
  if (value) {
    if (file.response && file.response.data) {
      previewImage.value = file.response.data
    } else {
      previewImage.value = file.url
    }
  }
  previewVisible.value = value
}
const handleOk = () => {
  let list = fileList.value.filter(i => i.status == 'done').map(el => {
    let obj = pick(el, ['uid', 'name', 'status', 'url'])
    if (!obj.url) obj.url = obj.url ? obj.url : el.response.data
    return obj
  })
  emits('ok', list, operateIndex.value)
  handleCancel()
}
const handleCancel = () => {
  visible.value = false
  fileList.value = []
}

defineExpose({
  open
})
</script>

